<template>
    <div class="container">
      <div>
        <div class="filter-order">
          <div class="order-container">
            <div
              class="order-item"
              :class="isActive === 0 ? 'active' : ''"
              @click="changeList(0)"
            >
              综合榜
            </div>
            <div
              class="order-item"
              :class="isActive === 1 ? 'active' : ''"
              @click="changeList(1)"
            >
              热练榜
            </div>
            <div
              class="order-item"
              :class="isActive === 2 ? 'active' : ''"
              @click="changeList(2)"
            >
              新锐榜
            </div>
            <div
              class="order-item"
              :class="isActive === 3 ? 'active' : ''"
              @click="changeList(3)"
            >
              最新
            </div>
          </div>
          <div class="filter-btn" @click="changePop">
            筛选
            <ele-ArrowDownBold
              style="
                vertical-align: middle;
                width: 16px;
                height: 16px;
                margin-left: 5px;
                padding-bottom: 5px;
              "
            ></ele-ArrowDownBold>
          </div>
        </div>
        <div class="filter-container">
          <div class="filter-content-container" :class="isPop ? 'activeStyle' : ''">
            <div
              class="filter-row el-row"
              v-for="(item, index) in condition"
              :key="index"
            >
              <div class="filter-label el-col el-col-2">
                {{ item.label }}
              </div>
              <div class="filter-content el-col el-col-22">
                <!---->
                <div
                  class="select-item"
                  v-for="choisesItem in item.choises"
                  :key="choisesItem.id"
                >
                  {{ choisesItem.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="video_card">
        <VCard
          class="recommend_item"
          v-for="item in integratedList"
          :key="item.id"
          :itemInfo="item"
        ></VCard>
      </div>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Original",
  });
  </script>
  <script lang="ts" setup>
  import useOriginal from "./hooks";
  import VCard from "../Original/components/VCard.vue";
  const originalState = useOriginal();
  const { integratedList, condition, isActive, isPop, changePop, changeList } =
    originalState;
  </script>
  <style scoped lang="scss">
  p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  
  .fold {
    height: 133px;
  }
  
  .active {
    color: #f93684 !important;
  }
  .activeStyle {
    display: block !important;
  }
  .filter-order {
    display: flex;
    align-items: center;
  }
  
  .filter-btn {
    height: 36px;
    border-radius: 18px;
    background: #e9ecec;
    line-height: 36px;
    color: #7d8090;
    font-size: 16px;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 10px;
  }
  
  .filter-container {
    padding: 26px 30px;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
  
    .filter-content-container {
      overflow: hidden;
      display: none;
      .filter-row {
        font-size: 14px;
        margin: 0 0 16px;
  
        .filter-label {
          color: #b1b5c1;
          padding: 7px 0;
        }
  
        .filter-content {
          .select-item {
            display: inline-block;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            color: #7d8090;
            padding: 7px 13px;
            user-select: none;
            margin-right: 24px;
            margin-bottom: 10px;
          }
        }
      }
    }
  
    .fold-toggle-container {
      text-align: center;
      color: #f93684;
      font-size: 14px;
      margin: 20px 0 0;
      cursor: pointer;
    }
  }
  
  .order-container {
    padding: 25px 30px;
    border-radius: 4px;
    margin-bottom: 10px;
    flex: 1;
  
    .order-item {
      display: inline-block;
      font-size: 14px;
      color: #7d8090;
      cursor: pointer;
  
      &.menu-hover-container {
        position: relative;
  
        .menu-content {
          display: none;
          position: absolute;
          z-index: 10020;
          top: 0;
          left: 50%;
          transform: translate(-50%, -17px);
          box-shadow: 2px 0 9px rgb(0 0 0 / 10%);
          border-radius: 4px;
          background-color: #fff;
  
          .menu-item {
            padding: 17px 0;
            width: 120px;
            text-align: center;
            font-size: 14px;
            color: #111;
            cursor: pointer;
  
            &:hover {
              color: deeppink;
            }
          }
        }
  
        &:hover {
          .menu-content {
            display: block;
          }
        }
      }
    }
  
    // 除了第一个,后几个左边距为60px
    .order-item:not(:first-child) {
      margin-left: 60px;
    }
  }
  .video_card {
    display: flex;
    justify-self: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .recommend_item {
      // width: 20%;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
  </style>
  